<%--
  Created by IntelliJ IDEA.
  User: 27716
  Date: 2024/10/22
  Time: 10:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
    <script src="../static/js/jquery-1.8.2.min.js"></script>
    <link rel="stylesheet" href="../static/css/login.css">
</head>
<body>
<form action="/list">
    <h2>星云商贸平台登录页面</h2>
    <%--id字段映射实体类--%>
    用户名：<input type="text" id="username" placeholder="用户名" value="${cookie.name.value}">
    <span id="usernameSpan"></span><br>
    密码： <input type="text" id="password" placeholder="密码" value="${cookie.pwd.value}">
    <span id="passwordSpan"></span><br>
    <input type="button" value="登录" onclick="login()">
</form>

</body>
<script>
    // 1.对账号进行非空校验,正则教研  至少2位 汉字,字母,数字 组成
    $("#username").blur(function () {
        let username = $("#username").val();
        if (!username) {
            $("#usernameSpan").html("账号不能为空").css("color","red");
        }else{
            const pattern = /^[\u4e00-\u9fa5A-z0-9]{2,}$/;
            if(pattern.test(username)){
                $("#usernameSpan").html("√").css("color","green")
            }else{
                $("#usernameSpan").html("账号错误").css("color","red");
            }
        }
    })
    // 2.对密码进行非空校验,正则教研  至少3-8位 字母,数字,下划线 组成
    $("#password").blur(function () {
        let password = $("#password").val();
        if (!password) {
            $("#passwordSpan").html("密码不能为空").css("color","red");
        }else{
            const pattern = /^\w{3,8}$/;
            if(pattern.test(password)){
                $("#passwordSpan").html("√").css("color","green")
            }else{
                $("#passwordSpan").html("密码错误").css("color","red");
            }
        }
    })
    // 3.ajax发起登录（笔记）
    function login(){
        //1.获取账号，密码的值 2.组装对象 3.发起异步请求
        let name = $("#username").val();
        let pwd = $("#password").val();

        //组装对象 {键：值 , 键,值}
        //键 -->实体类的字段名  值-->获取的值上面
        let obj = {username:name,password:pwd};
        $.ajax({
            url:"/user/login",
            type:"post",
            data:{reqInfos:JSON.stringify(obj)},
            dataType:"json",//解析响应结果，JSON格式
            success(res){
                //res 代表 响应的结果
                console.log(res) //找报错
                if(res === 1){
                    alert("账号错误")
                }else if(res === 2){
                    alert("密码错误")
                }else if(res === 3){
                    alert("账号警用")
                }else{
                    alert("登录成功")
                    location.href = "index.jsp";
                }
            },
            error(){
                alert("服务开小差了~请联系管理员110")
            }
        })
    }

</script>
</html>
